<template>
	<view class="equipment">
		<view class="equipment_box">
			<view class="equipment_list">
				<view class="equipment_item black" v-for="(item,index) in 10" :key="index" @click="jump(`/pageB/noticeInfo?name=公告详情`)">
					<view class="l">
						<image src="/static/newProject/equipment/equipment3.png" mode=""></image>
						<view class="center_info">
							<view class="text">
								32-LW-FFFFF0215D4G5FF51FDSS54545444......
							</view>
							<view class="text1">
								联通宽带
							</view>
						</view>
					</view>
					<view class="r">
						<text>05/20</text>
						<!-- <image src="/static/newProject/equipment/icon_r.png" mode=""></image> -->
					</view>
				</view>
			</view>	
		</view>
	</view>
</template>

<script>
	import headerTop from"@/components/dacizi-headtag/dacizi-headtag.vue"
	export default {
		components:{headerTop},
		data() {
			return {
				equipment:[
					{title:'全部',value:6,color:'#FFFFFF'},
					{title:'在线',value:3,color:'#00FF00'},
					{title:'离线',value:3,color:'#A0A0A0'},
					{title:'故障',value:0,color:'#FF0000'},
				]
			}
		},
		methods: {
			jump(url){
				uni.navigateTo({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
.equipment{
	.top_equipment{
		width: 100%;
		height: 180rpx;
		background: #F6F6F6;
		box-sizing: border-box;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.top_item{
			width: 150rpx;
			height: 150rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
			border-radius: 10rpx;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-family: Microsoft YaHei;
			color: #333333;
			font-size: 30rpx;
			.num{
				margin-bottom: 20rpx;
				font-weight: bold;
			}
			.circular{
				position: absolute;
				top: 15rpx;
				right: 15rpx;
				width: 15rpx;
				height: 15rpx;
				border-radius: 50%;
			}
		}
	}
	.equipment_box{
		padding: 20rpx 30rpx;
		.top_box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.l{
				display: flex;
				align-items: center;
				image{
					margin-left: 13rpx;
					margin-right: 10rpx;
					width: 33rpx;
					height: 38rpx;
				}
				text{
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #333333;
				}
			}
			.r{
				font-size: 20rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #333333;
			}
		}
		.cenetr_box{
			margin-top: 29rpx;
			height: 80rpx;
			background: #EEEEEE;
			border-radius: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;
			box-sizing: border-box;
			.l{
				font-size: 20rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #333333;
			}
			.r{
				font-size: 20rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #FF0000;
				image{
					margin-left: 90rpx;
					width: 24rpx;
					height: 14rpx;
				}
			}
		}
	
		.equipment_list{
			margin-top: 20rpx;
			.equipment_item{
				margin-bottom: 20rpx;
				width: 100%;
				padding: 25rpx 30rpx;
				border-radius: 10rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				.l{
					display: flex;
					image{
						width: 80rpx;
						height: 80rpx;
						border-radius: 10rpx;
					}
					.center_info{
						margin-left: 14rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						width: 400rpx;
						height: 100%;
						.text{
							width: 400rpx;
							   width: 100%;//固定宽度
							    overflow: hidden;//溢出隐藏
							    white-space: nowrap;//不换行
							    text-overflow: ellipsis;//显示...
								color: #333333;
								font-size: 20rpx;
						}
						.text1{
							width: 400rpx;
							   width: 100%;//固定宽度
							    overflow: hidden;//溢出隐藏
							    white-space: nowrap;//不换行
							    text-overflow: ellipsis;//显示...
								color: #999999;
								font-size: 20rpx;
						}
					
					}
				}
				.r{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					text{
						font-size: 20rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #333333;
					}
					image{
						margin-left: 22rpx;
						width: 14rpx;
						height: 24rpx;
					}
				}
			}
			.gray{
				background: #F6F6F6;
				color: #CCCCCC;
			}
			.black{
				background: #F6F6F6;
				color: #333333;
			}
		}
	}
	
}
</style>
